---
title: Server Components (RSC) - Flowbite React
description: Learn how to use Flowbite React components inside React Server Components
---

React Server Components are a powerful feature that allows components to be rendered entirely on the server. When used with Flowbite React, they offer several benefits:

- 🚀 Reduced client-side JavaScript bundle size
- ⚡ Improved initial page load performance
- 🔄 Server-side data fetching

## Server vs Client Components

### Server Components (Default)

By default, all components in React are now server components. They don't need any special directive:

```jsx
import { Button } from "flowbite-react";

function ServerComponent() {
  // ✅ Works: Static button without interactions
  return <Button>Click Me</Button>;
}
```

### Client Components

To handle user interactions (like clicks or input), you need to mark your component as a client component using the `"use client"` directive:

```jsx
"use client";

import { Button } from "flowbite-react";

function ClientComponent() {
  // ✅ Works: Button with click handler
  return <Button onClick={() => console.log("clicked!")}>Interactive Button</Button>;
}
```

## Common Pitfalls

### ❌ Wrong: Event Handlers in Server Components

```jsx
// This will cause an error!
import { Button } from "flowbite-react";

function ServerComponent() {
  return <Button onClick={() => console.log("clicked!")}>This Won't Work</Button>;
}
```

### ✅ Correct: Event Handlers in Client Components

```jsx
"use client";

import { Button } from "flowbite-react";

function ClientComponent() {
  return <Button onClick={() => console.log("clicked!")}>This Works Fine</Button>;
}
```

## Important Notes

1. **Flowbite React Compatibility**
   - All Flowbite React components are server-component ready
   - They can be used in both server and client components

2. **Event Handlers**
   - User events (`onClick`, `onBlur`, etc.) require `"use client"`
   - The component containing these events must be a client component

3. **Props Limitations**
   - Only serializable data can be passed to server components
   - Functions, complex objects, and React nodes might not work as props in server components

## Best Practices

- Use server components by default for static content
- Switch to client components only when you need:
  - User interactions (event handlers)
  - Browser APIs
  - State management
  - Effects

This approach ensures optimal performance while maintaining full functionality.

## Support

💡 **Full Server Component Support**

Flowbite React is fully optimized for React Server Components:

- All components work out-of-the-box in server components
- Zero configuration needed for server-side rendering
- Automatic client/server boundary handling
- Optimized for performance in both environments

Just remember to add `"use client"` only when you need interactivity:

```jsx
"use client";

import { Button, Modal } from "flowbite-react";

function InteractiveWidget() {
  // ✅ Use client components when you need interactivity
  return <Button onClick={() => setIsOpen(true)}>Open Modal</Button>;
}
```
